<!-- -->
<template>
  <div class='container'>
    <h2 class="level">医院</h2>
    <div class="content">
      <div class="level">等级：</div>
      <div class="level-content">
        <div @click="changeLevel({}, -1)" :class="['level-item', activeIndex == -1 ? 'active' : '']">全部</div>
        <div @click="changeLevel(item, index)" :class="['level-item', activeIndex === index ? 'active' : '']" v-for="(item, index) in levelList" :key="index">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import { reqHospitalLevelAndRegion } from '@/api/path'

let levelList = ref([
  { name: '三级甲等', value: '001' },
  { name: '三级乙等', value: '002' },
  { name: '二级甲等', value: '003' },
  { name: '二级乙等', value: '004' },
  { name: '一级', value: '005' },
])

let activeIndex: any = ref(-1)

const emit = defineEmits(['update:changeLevel'])

const changeLevel = (val: any, index: number) => {
  activeIndex.value = index
  emit('update:changeLevel', val.value)
}

const getLevelList = async () => {
  let res: any = await reqHospitalLevelAndRegion('HosType')
  if (res?.code === 200) {
    levelList.value = res.data
  }
}

onMounted(() => {
  getLevelList()
})

</script>

<style lang='scss' scoped>
.container {
  margin-top: 10px;
  h2 {
    font-weight: 900;
  }
  .content {
    display: flex;
    margin: 10px 0;
    .level {
        color: #7f7f7f;
        width: 48px;
      }
    .level-content {
      display: flex;
      cursor: pointer;
      color: #7f7f7f;
      
      .level-item {
        margin: 0 12px 10px 0;
      }
      .active {
        color: #55a6fe;
      }
    }
  }
}
</style>
